<template>
	<view>
		<!-- <image :src="banners[0].url" mode=""></image> -->
		<swiper
		    class="swiper_wrap"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
		>
			<swiper-item v-for="item in banners" :key="item.id">
				<view class="banner">
					<image :src="item.url" mode=""></image>
					<view class="btn_detail_wrap">
						<view class="btn_detail" @click="toFoodDetail">
							查看详情
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="m_title">
			<image class="m_title_img" src="../../static/image/food_type.png"></image>
		</view>
		<view class="food_type_wrap">
			<block v-for="item in foodTypes" :key="item.id">
				<image class="food_type_image" :src="item.url"></image>
				<!-- <text>{{item.tname}}</text> -->
			</block>
		</view>
		<view class="m_title_two">
			<image class="m_title_img" src="../../static/image/food.png"></image>
		</view>
		<view class="food_wrap">
			<block v-for="item in foods" :key="item.id">
				<view class="food_item">
					<image class="food_image" :src="item.url"></image>
					<view class="food_name">{{item.fname}}</view>
					<view class="food_sum">月售{{item.number}}</view>
					<view class="food_price">￥{{item.money}}</view>
					<button type="default" plain size="mini">加入购物车</button>
				</view>
				
			</block>
		</view>
		<view class="more_btn">
			<button class="nva_btn" plain size="mini" @click="toTypeNav" >更多菜品</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
           return {
			   userInfo: null,
			   banners: [],
			   foodTypes: [],
			   foods: [],
			   indicatorDots: true,
			   autoplay: true,
			   interval: 2000,
			   duration: 500
		   }
		},
		created() {
			this.loadList()
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.openId) {
				this.userInfo = userInfo
			} else {
				this.authLogin()
			}
		},
		methods: {
			toTypeNav() {
				uni.navigateTo({
					url: '/pages/foodTypes/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			toFoodDetail() {
				uni.navigateTo({
					url: '/pages/foodDetail/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			async loadList() {
				const result = await this.$request('/homeInfo')
				console.log(result)
				if (result.status !== 1001) {
					return false
				}
				this.banners = result.data.banners
				this.foodTypes = result.data.foodTypes
				this.foods =result.data.foods
			},
			async authLogin() {
				var _this = this;
				////弹窗授权
				//showModal用于触发uni.getUserProfile弹窗
				uni.showModal({
					title: '授权登录',
					showCancel: false,
					content: '请授权登录微信小程序？',
					success: () => {
						uni.getUserProfile({
							desc: '登录后可同步数据',
							lang: 'zh_CN',
							success: (infoRes) => {
								console.log('用户信息-----------', infoRes)
								//获取code
								uni.login({
									provider: 'weixin',
									success: (loginRes) => {
										console.log('获取code-----------', loginRes)
										//调用接口传递参数
										let parames = {
											code: loginRes.code,
											encryptedData: infoRes
												.encryptedData,
											iv: infoRes.iv,
											// signature: infoRes.signature,
											// rawData: infoRes.rawData
										};
										uni.request({
											url: 'https://www.xinyixjc.com/miniapp/api/authLogin',
											data: {
												code: loginRes.code,
												encryptedData: infoRes
													.encryptedData,
												iv: infoRes.iv,
											},
											method: 'GET'
										}).then((res) => {
											//获取到 openid 和 session_k后，自己的逻辑
											if (res[1].data.status ==
												1001) {
												console.log("登录状态1");
												//如果是app的登录
												uni.setStorageSync('userInfo', res[1].data.data)
											} else {
												console.log("登录状态2")
												_this.logining = false;
											}
										});
									},
									fail: function(err) {
										uni.showToast({
											icon: 'none',
											title: '授权失败'
										})
									}
								});
							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '授权失败'
								})
							}
						});
					}
				})
				//未弹窗授权
				// 获取用户信息， 传给后端换取openid / uuid
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('infoRes', infoRes)
						//获取code
						uni.login({
							provider: 'weixin',
							success: (loginRes) => {
								console.log('loginRes', loginRes);
								//调用接口传递参数
								let parames = {
									code: loginRes.code,
									encryptedData: infoRes.encryptedData,
									iv: infoRes.iv,
									signature: infoRes.signature,
									rawData: infoRes.rawData
								};
							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '授权失败，请重新授权'
								})
							}
						});
					},
					fail: function(err) {
						uni.showToast({
							icon: 'none',
							title: '授权失败，请重新授权'
						})
					}
				});

			},
		}
	}
</script>

<style>
page {
	background: #ffffff;
}
.swiper_wrap {
	width: 100%;
	height: 330px;
}
.banner {
	width: 100%;
	height: 330px;
	position: relative;
}
.banner image {
	width: 100%;
	height: 100%;
}
.btn_detail_wrap {
	position: absolute;
	width: 100%;
	left: 50%;
	margin-left: -54px;
	bottom: 52px;
}
.btn_detail {
	width: 108px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-size: 14px;
}
.m_title {
	margin: 30px auto 16px;
	text-align: center;
}
.m_title_img {
	width: 126px;
	height: 51px;
}
.food_type_wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	box-sizing: border-box;
}
.food_type_image {
	width: calc((100% - 10px) / 2);
	height: 124px;
	margin-bottom: 10px;
}
.m_title_two {
	margin: 30px auto 0;
	text-align: center;
}
.food_wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0px 30px;
	box-sizing: border-box;
}
.food_item {
	width: calc((100% - 60px) / 2);
	height:298px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: bold;
}
.food_image {
	height: 127px;
	width: 127px;
}
.food_sum {
	font-size: 12px;
	color: #979797;
	margin: 4px 0 8px 0;
	font-weight: 400;
}
.food_price {
	margin-bottom: 8px;
}
.more_btn {
	width: 100%;
	padding: 20px 0;
	text-align: center;
}
.nva_btn {
	margin-bottom: 20px;
	background: #000000;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
}
</style>
